<template>
  <div class="carousel">
    <HeaderView></HeaderView>
    <el-button type="primary" @click="deployWin = true" plain style="float: right;margin: 20px">配 置</el-button>
    <div class="card-box">
      <el-carousel :interval="4000" type="card" height="350px">
        <el-carousel-item v-for="(item,index) in carouselFromView.items" :key="index">
          <!--          <h3 class="medium">{{ item }}</h3>-->
          <h3 class="medium">
            <el-image :src="item.imageUrl"></el-image>
          </h3>
        </el-carousel-item>
      </el-carousel>
    </div>

    <el-dialog
        title="轮播图配置"
        @close='close'
        :visible.sync="deployWin"
        :close-on-click-modal="false">
      <el-form :rules="rules" :model="carouselFromView" label-width="100px">
        <el-form-item label="轮播图名称" prop="bannerName">
          <el-input type="text" v-model="carouselFromView.bannerName"></el-input>
        </el-form-item>
        <el-form-item label="轮播图列表" required>
          <div v-for="(item,index) in carouselFromView.items" :key="index"
               class="item-box">
            <el-form-item label="序号：" class="form-item">
              <el-input-number style="width: 250px;" v-model="item.order" @change="handleChange" :min="1"
                               :max="5"></el-input-number>
            </el-form-item>
            <el-form-item label="标题：" class="form-item">
              <el-input style="width: 250px;" v-model="item.title"></el-input>
            </el-form-item>
            <el-form-item label="图片：" class="form-item">
              <div class="image-container" @mouseenter="showButton" @mouseleave="hideButton">
                <el-image v-if="item.imageUrl" :src="item.imageUrl"></el-image>
                <div class="buttons">
                  <el-button style="margin: 5px" v-if="showButtons" size="mini" type="primary"
                             @click.stop="upload(index)">图库上传
                  </el-button>
                  <el-upload :http-request="fileRequest"
                             action="" ref="upload">
                    <el-button style="margin: 5px" v-if="showButtons" size="mini" type="primary">本地上传
                    </el-button>
                  </el-upload>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="音乐：" class="form-item">
              <el-select style="width: 250px;" v-model="item.musicId" placeholder="请选择活动区域">
                <el-option v-for="(item,index) in musicData" :key="index" :label="item.name"
                           :value="item.id"></el-option>
                <!--                <el-option label="区域二" value="beijing"></el-option>-->
              </el-select>
            </el-form-item>
          </div>
        </el-form-item>
      </el-form>
      <el-button @click="deployWin = false">取 消</el-button>
      <el-button @click="sure" type="primary">确 定</el-button>
    </el-dialog>

    <!--图库-->
    <el-dialog title="上传文件"
               :visible.sync="fileWin" width="1000px">
      <div class="dialog-height">
        <div class="img-box">
          <el-radio-group v-model="selectedIndex" size="small">
            <el-radio-button :label="index" v-for="(item, index) in fileList" :key="index">
              <el-image @click="selectImage(index,item.picUrl)" style="width: 200px; height: 200px"
                        :src="item.picUrl"></el-image>
            </el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <el-button @click="fileWin = false">取 消</el-button>
      <el-button @click="fileWin = false" type="primary">确 定</el-button>
    </el-dialog>

  </div>
</template>

<script>
import HeaderView from "@/views/layout/headerView.vue";
import {carouseConfig, getCarouse, getResource, uploadResource} from "@/api/common";
import {completionUrl, splitImageUrl/*, splitImageUrl*/} from "@/utils/common";
import {mapState} from "vuex";

export default {
  components: {HeaderView},
  data() {
    return {
      // 配置窗口
      deployWin: false,

      // 文件
      fileWin: false,
      showButtons: true,
      imageUrl: '',
      // 服务器图片
      fileList: [],
      selectedImageUrl: '',
      selectedIndex: null,

      uploadIndex: 0,

      // 轮播图图片
      carouselImgList: [],

      // 轮播图配置表单
      carouselFrom: {
        bannerName: '',
        items: [
          {
            order: 0,
            title: '',
            imageUrl: '',
            musicId: 0
          },
          {
            order: 0,
            title: '',
            imageUrl: '',
            musicId: 0
          },
          {
            order: 0,
            title: '',
            imageUrl: '',
            musicId: 0
          },
          {
            order: 0,
            title: '',
            imageUrl: '',
            musicId: 0
          },
          {
            order: 0,
            title: '',
            imageUrl: '',
            musicId: 0
          },
        ]
      },

      carouselFromView: {
        bannerName: '',
        items: [
          {
            order: 0,
            title: '',
            imageUrl: '',
            musicId: 0
          },
          {
            order: 0,
            title: '',
            imageUrl: '',
            musicId: 0
          },
          {
            order: 0,
            title: '',
            imageUrl: '',
            musicId: 0
          },
          {
            order: 0,
            title: '',
            imageUrl: '',
            musicId: 0
          },
          {
            order: 0,
            title: '',
            imageUrl: '',
            musicId: 0
          },
        ]
      },
      rules: {
        bannerName: [
          {required: true, message: '请输入轮播图名称', trigger: 'blur'},
        ],
      },
    }
  },
  created() {
    this.getMusicList()
    this.getCarouselList()
  },
  computed: {
    ...mapState('music', ['musicData'])

  },
  methods: {
    // 获取配置信息
    getCarouselList() {
      getCarouse().then(resp => {
        resp.data.data.items.forEach(item => {
          if (item !== "") {
            item.imageUrl = completionUrl(item.imageUrl)
          }
        })
        this.carouselFromView = resp.data.data
      })
    },

    // 配置广告
    sure() {
      this.carouselFromView.items.forEach(item=>{
        if (item.imageUrl!==''){
          item.imageUrl=splitImageUrl(item.imageUrl)
        }
      })
      this.carouselFrom=this.carouselFromView
      carouseConfig(this.carouselFrom).then(resp => {
        console.log(resp)
      })

      this.deployWin = false
      this.$message({
        type: "success",
        message: "配置成功"
      })
      this.getCarouselList()
    },

    handleChange(value) {
      console.log(value);
    },

    // 关闭配置窗口
    close() {
      if (this.deployWin) {
        this.deployWin = !this.deployWin
      }
      this.getCarouselList()
    },

    // 获取音乐列表
    getMusicList() {
      this.$store.commit("music/reqMusicList")
    },

    // 服务器图片上传
    upload(index) {
      this.fileWin = true
      this.uploadIndex = index
      getResource('image').then(response => {
        response.data.data.forEach(item => {
          var picUrl = completionUrl(item)
          this.fileList.push({picUrl: picUrl})
        })
      })
    },
    // 本地图片上传
    fileRequest(f) {
      let file = f.file
      const formData = new FormData
      formData.append('file', file)
      //upload为上传的接口
      uploadResource('image', formData).then(res => {
        this.addForm.picUrl = res.data.data
        this.imageUrl = completionUrl(res.data.data)
      });
    },
    // 图片选中
    selectImage(index, imageUrl) {
      // 展示图片
      this.carouselFromView.items[this.uploadIndex].imageUrl = imageUrl
    },

    // 上传图片选择按钮
    showButton() {
      this.showButtons = true;
    },
    hideButton() {
      this.showButtons = false;
    },
  }
}
</script>

<style scoped lang="scss">

.dialog-height {
  height: 600px;
  overflow-y: auto;
}

.image-container {
  display: flex;
  flex-direction: column;
  width: 148px;
  height: 148px;
  border: 1px dotted skyblue;
  border-radius: 4px;
  position: relative;
  margin: 10px;
}

.buttons {
  position: absolute;
  display: flex;
  flex-direction: column;
  margin: 30px 30px;
}

.image-container:hover button {
  display: block;
}

.card-box {
  width: 1200px;
  margin: 0 auto;

  padding: 150px 0;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.item-box {
  margin-top: 10px;
  border: 1px solid #C0C4CC;
  border-radius: 4px
}

.form-item {
  margin-top: 10px;
  margin-bottom: 10px;
}

.el-upload {
  width: 180px;
  height: 90px;
  border: 1px dashed #99a9bf;
  border-radius: 4px;
  background: #c0ccda
}
</style>